import React, { Component } from "react";
import withPortal from "./withPortal";
import { bool, string, func, element, oneOfType, number } from "prop-types";

import "./style.css";

class Modal extends Component {
  static propTypes = {
    visible: bool.isRequired,
    title: oneOfType([element, string]),
    okText: string,
    onCancel: func,
    onOk: func,
    width: oneOfType([number, string]),
  };

  static defaultProps = {
    title: "Basic Modal",
    okText: "确定",
    width: 520,
  };

  render() {
    // console.log(this.props);
    return (
      this.props.visible && (
        <div className="shadow">
          <div className="center" style={{ width: +this.props.width }}>
            <header>{this.props.title}</header>
            <main>{this.props.children}</main>
            <footer>
              <button onClick={this.props.onCancel}>取消</button>
              <button onClick={this.props.onOk}>{this.props.okText}</button>
            </footer>
          </div>
        </div>
      )
    );
  }
}

export default withPortal(Modal);
